<template>
  <div class="logistics-search">
    <div class="search-panel">
      <div class="input-item">
        <span class="iconfont icon-wuliuchaxun"></span>
        <input type="text" placeholder="查询方式" v-model="searchType" />
      </div>
      <div class="input-item">
        <span class="iconfont icon-kaishiriqi"></span>
        <input
          type="text"
          placeholder="开始日期"
          v-model="startDate"
          @click="pickStartDate"
        />
        <mt-datetime-picker
          ref="startDatePicker"
          type="date"
          year-format="{value} 年"
          month-format="{value} 月"
          date-format="{value} 日"
          @confirm="startDateConfirm"
        >
        </mt-datetime-picker>
      </div>
      <div class="input-item">
        <span class="iconfont icon-jieshuriqi"></span>
        <input
          type="text"
          placeholder="结束日期"
          v-model="endDate"
          @click="pickEndDate"
        />
        <mt-datetime-picker
          ref="endDatePicker"
          type="date"
          year-format="{value} 年"
          month-format="{value} 月"
          date-format="{value} 日"
          @confirm="endDateConfirm"
        >
        </mt-datetime-picker>
      </div>
      <div class="input-item">
        <span class="iconfont icon-dingdan"></span>
        <input type="text" placeholder="订单状态" disabled v-model="orderStatus" />
      </div>
      <div class="btn-box">
        <mt-button class="search-btn" type="danger">查询</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "LogisticsSearch",
  data() {
    return {
      searchType: "",
      startDate: "",
      endDate: "",
      orderStatus: "",
    };
  },
  methods: {
    pickStartDate() {
      this.$refs.startDatePicker.open();
    },
    startDateConfirm(date) {
      let year = date.getFullYear(),
        month = date.getMonth() + 1,
        days = date.getDate();

      this.startDate = `${year} / ${month} / ${days}`;
    },
    pickEndDate() {
      this.$refs.endDatePicker.open();
    },
    endDateConfirm(date) {
      let year = date.getFullYear(),
        month = date.getMonth() + 1,
        days = date.getDate();

      this.endDate = `${year} / ${month} / ${days}`;
    },
  },
};
</script>

<style scoped>
.logistics-search {
  padding: 0 20px;
}
>>> .search-panel {
  margin-top: -60px;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  background: #fff;
  position: relative;
}
>>> .search-panel .iconfont {
  vertical-align: middle;
}
>>> .search-panel .input-item {
  border-bottom: 1px solid var(--gray2);
}
>>> .search-panel .input-item + .input-item {
  margin-top: 10px;
}
>>> .input-item input {
  height: 24px;
}
.btn-box {
  margin-top: 20px;
  margin-bottom: -30px;
  text-align: center;
}
.search-btn {
  border-radius: 20px;
  padding-left: 50px;
  padding-right: 50px;
}
</style>